<template>
	<view class="confirm-order bg-active-color">
		<Lines></Lines>
		
		<!-- 地址 -->
		<view class="order-map" @tap='goPathList'>
			<template v-if='path'>
				<view class="map-title">
					<view class="map-name">收件人：<text>{{path.name}}</text></view>
					<view class="">手机号：{{path.tel}}</view>
				</view>
				<view class="map-city">收货地址：{{path.city}}{{path.details}}</view>
			</template>
			<template v-else>
				<view class="map-title">
					<view class="map-name">请选择地址</view>
				</view>
			</template>
		</view>
		<!-- 商品 -->
		<view class="goods-list">
			
			<view class="goods-content bg-active-color"
			v-for="(item, index) in goodsList"
			:key="index"
			>
				<image class="goods-img" :src="item.imgUrl" mode=""></image>
				<view class="goods-text">
					<view class="goods-name">{{item.name}}</view>
					<view class="goods-size f-color">颜色分类：粉色</view>
					<view class="f-active-color" style='font-size:24rpx;'>七天无理由退货</view>
				</view>
				<view class="">
					<view class="">￥{{item.pprice}} </view>
					<view class="f-color"> X {{item.num}}件</view>
				</view>
			</view>

		</view>
		<!-- 底部提交订单 -->
		<view class="order-foot">
			<view class="total-price" >合计<text class="f-active-color">￥{{totaoCount.pprice}}</text></view>
			<view class="confirm" @tap="goPayment">提交订单</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from '../../components/common/Lines.vue'
	import { mapGetters, mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				path: false
			}
		},
		computed: {
			...mapState({
				list:state => state.cart.list,
			}),
			...mapGetters(['defaultPath', 'totaoCount']),
			// 根据商品列表找到对应e.detail  数据的id，最终返回数据
			goodsList(){
				return this.item.map(id => {
					return this.list.find(v => v.id == id);
				})
			}
		},
		onLoad(e) {
			// console.log(this.list, e.detail)
			// 选中的商品id集合
			this.item = JSON.parse(e.detail)
			// 如果有一个默认地址的一个赋值
			
			$http.request({
			  url: "/selectAddress",
			  method:"POST",
			  header:{
				  token:true
			  }
			}).then((res) => {
				this.__initAddressList(res);
				if (this.defaultPath.length) {
					this.path = this.defaultPath[0];
				}
			}).catch(() => {
			  uni.showToast({
			    title: '请求失败···',
			    icon: 'none'
			  })
			})
			

			// 如果触发自定义事件selectPathItem， $on去接收值
			uni.$on('selectPathItem', (res) => {
				// console.log(res)
				this.path = res;
			})
		},
		onUnload() {
			uni.$off('selectPathItem', ()=> {
				console.log('移除了selectPathItem')
			})
		},
		components: {
			Lines
		},
		methods: {
			...mapMutations(['__initAddressList']),
			// 跳转到地址管理页面
			goPathList() {
				uni.navigateTo({
					url:'../my-path-list/my-path-list?type=selectedPath'
				})
			},
			goPayment() {
				if(!this.path) {
					return uni.showToast({
						title:"请选择收货地址",
						icon:'none'
					})
				}
				
				uni.navigateTo({
					url:'../payment/payment'
				})
			}
		}
	}
</script>

<style scoped>
	.confirm-order {
		position: absolute;
		left: 0;
		top:0;
		right:0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.order-map {
		padding: 20rpx;
		background-color: #FFFFFF;
		line-height: 40rpx;
	}
	.map-title {
		display: flex;
		justify-content: space-between;
	}
	.map-name {
		font-weight: bold;
	}
	.goods-list {
		background-color: #FFFFFF;
		margin-top: 20rpx 0;
	}
	.goods-content {
		margin: 20rpx;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: 2px solid #f3f3f3;
	}
	.goods-text {
		width: 360rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
	}
	.goods-name {
		font-size: 26rpx;
		height: 80rpx;
		overflow: hidden;
	    display: -webkit-box;
	    overflow: hidden;
	    -o-text-overflow: ellipsis;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    word-break: break-all;
	}
	.goods-size {
		font-size: 24rpx;
	}
	.order-foot {
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.total-price {
		padding: 0 20rpx;
	}
	.confirm {
		color: #FFFFFF;
		background-color: #ff115c;
		padding: 28rpx 40rpx;
	}
</style>
